量化咖（lhk.ai）UI 设计梳理

本文以 lhk.ai 线上产物为唯一事实来源，逐层拆解其 UI 设计：先讲行为（用户如何与界面交互、页面如何被加载），再讲结构（界面由哪些组件与令牌构成），最后给出可直接复用的速查手册与逆向复刻操作手册。

1. 概述

1.1 产品定位与技术栈

量化咖（英文 LHK Quant）是一个面向全球市场的量化交易 SaaS 平台，标语「让量化交易更简单」。产品覆盖行情研究、指标绘图、策略构建与回测、策略广场跟投、AI 自主实盘托管、数据中心与内容学习等完整链路，同时提供中英双语。

1.2 双设计体系（两套视觉语言并存）

lhk.ai 的 UI 并非单一风格，而是刻意分成两层，服务两类完全不同的场景：

1.3 逆向方法（本文如何得出）

1. 抓取 index.html：得到主题引导脚本、初始加载层结构、静态资源清单。
2. 抓取 index.css：提取全部 :root 自定义属性（Design Token）与组件样式。
3. 抓取 index.js：提取路由表、懒加载 chunk 映射、i18n 键值、组件类名。
4. 抓取 LandingHome.* 与 LandingHome.css：还原落地页专属设计与独立令牌。

2. 行为图

行为图回答「系统做什么、用户怎么走」。顺序为：用例图（整体行为）→ 活动图（核心旅程）→ 时序图（加载与主题）→ 状态图（会话生命周期）。

2.1 用例图（整体行为）

图 2-1 用例图：五类角色 × 量化咖 Web 应用的完整功能边界

2.2 活动图：核心用户旅程

从访客到达落地页，到注册、选择路径、最终把策略跑在实盘上，是产品的主干路径。下图用 fork 表达「逛行情 / 抄策略 / 自建策略」三条并行支线。

图 2-2 活动图：从落地页到 AI 实盘托管的主流程

2.3 时序图：首屏加载与主题初始化

主题必须在首帧就正确，否则会「白闪」（FOUC）。因此主题读取被放在 HTML 头部的一段内联脚本中，先于任何 bundle 执行；随后 Vue 挂载、路由解析、懒加载页面 chunk、请求后端数据。

图 2-3 时序图：从 HTTP 请求到页面渲染、再到主题切换的完整调用链

2.4 状态图：会话与会员状态

图 2-4 状态图：访客 → 登录 → 会员 → 退出的生命周期

3. 结构图

结构图回答「界面由什么组成」。顺序为：部署图（宏观运行环境）→ 组件图（应用与组件依赖）→ 包图（分层架构）→ 类图（设计系统对象模型），层层细化。

3.1 部署图

图 3-1 部署图：浏览器运行时、静态资源服务器 / CDN、后端服务集群

3.2 组件图

图 3-2 组件图：应用外壳、业务页面、基础组件、底层依赖四层

3.3 包图

图 3-3 包图：Layout / Page / Component / Token / Foundation 五层

3.4 类图：设计系统对象模型

图 3-4 类图：DesignToken / ThemeProfile / AppShell 及核心 UI 对象的属性与方法

4. 设计语言与 Design Token

量化咖通过 CSS 自定义属性（CSS Variables）实现真正的「令牌化」：颜色、字体、圆角、阴影、层级全部以变量表达，换肤与品牌调整只需改变量。

4.1 字体与字号

4.2 颜色系统

应用体系令牌

语义色（亮 / 暗两套）

落地页体系令牌（独立命名空间）

4.3 圆角 / 阴影 / 层级

z-index 采用「业务分层 + 明确号段」策略，避免弹层互相遮盖：

4.4 主题机制

<html lang="en" data-app-theme="dark" data-initial-loading-theme="light">
<script>
  const defaultTheme = 'dark'
  const pathname = window.location.pathname.replace(/\/+$/, '') || '/'
  const adaptiveLoadingTheme =
    pathname === '/' || pathname === '/index' ||
    pathname === '/chart' || pathname.startsWith('/chart/')
  document.documentElement.dataset.initialLoadingTheme =
    adaptiveLoadingTheme ? 'adaptive' : 'light'
  try {
    const storedTheme = window.localStorage.getItem('lhk:app:theme:v2')
    document.documentElement.dataset.appTheme =
      storedTheme === 'light' ? 'light' : defaultTheme
  } catch {
    document.documentElement.dataset.appTheme = defaultTheme
  }
</script>

• 默认暗色：data-app-theme 默认 dark。
• 持久化：键名 lhk:app:theme:v2，仅当值为 light 时切亮色。
• 自适应加载主题：首页与图表页使用 adaptive（暗色加载底 #0d0f12），其余页面用亮色加载底 #fff。
• 落地页独立切换：landing-page--dark 类，文案「切换到暗色/亮色模式」，0.24s 过渡。

5. 页面地图与核心页面 UI

路由体系按业务域划分，主要路径如下（meta.title 为浏览器标题）：

5.1 营销落地页（/）

• 头部：粘性，高 76px，三栏网格 minmax(150px,1fr) auto minmax(220px,1fr)，最大宽 1500px；滚动或展开菜单后转为 rgba(255,255,255,.9) 毛玻璃（backdrop-filter: blur(18px) saturate(140%)）。
• 导航：超级图表、产品定价、策略广场、策略构建、知识文库、新手学院、解决方案；hover 时下划线滑入。
• 工具区：语言切换、主题切换、汉堡菜单均为 42px 圆形按钮；主 CTA「立刻开始」为黑底胶囊 + 圆形箭头，hover 上移 2px。
• Hero：居中，标题 clamp(52px, 5.4vw, 86px)、行高 0.98、字重 600；导语最大宽 840px、行高 1.8；两个 CTA「构建策略，立刻实盘」「探索策略广场」。
• 产品预览：Hero 下方内嵌 home-hero.mp4（+ .hvc1 / webp 海报）视频，蓝色渐变描边与辉光投影。

5.2 公共头部与 Mega Menu

• 应用头部高 --public-header-height: 60px（移动 56px），最大宽 1880px，左右内边距 26px（移动 18/12px）。
• 左侧品牌 Logo，中间「所有功能」触发 Mega Menu，右侧账户区。
• Mega Menu：最大宽 1500px，六张功能卡（策略构建中心、知识文库、新手学院、解决方案、策略广场、数据中心），每张含标题、描述、标签胶囊；侧栏为快速入口分组（官方创作者、平台支持、快速入口、注册、VIP 会员、工单支持）；底部为号召区。
• 账户区：未登录显示「登录 / 注册」；已登录为头像触发器，下拉菜单含会员徽章、姓名、账户信息、安全中心、偏好设置、账单、收藏、关注、实盘、发布、工单、退出，支持暗色变体。

5.3 公共页脚

• 白底、上边框 #eef1f6、上下内边距 60px、内容最大宽 1300px、正文色 #667085；列标题 16px / 700 / #111827。
• 三列 + 二维码：关于量化咖（关于我们、求职机会、隐私政策、服务条款、解决方案、公开索引与数据使用规则）；产品（超级图表、甄选策略、投稿策略赚取收益、构建策略、知识文库、新手学院）；服务（成为 VIP 会员、成为官方认证策略创作者、官方合作交易所、通过工单获取帮助）；官方公众号 二维码。

5.4 超级图表工作台（/chart）

• 该路由 meta 设置 isHideHeader / isHideFooter = true，采用全屏工作区布局，最大化绘图与看盘面积。
• 能力：多市场行情 K 线、专业指标、绘图工具、自选表、价格警报、回放/复盘，并可在同一工作区保存分析进度。
• 含图表教学引导层（抽屉 z-index 3600、提示 5200、引导 7000），以及 AI 编码助手悬浮组件。
• 市场行情走势遵循国内习惯：红涨绿跌（useUserUpColor 控制涨跌配色）。

5.5 策略广场与策略构建

• 策略广场：卡片式浏览全球策略，支持一键跟投；含「甄选策略」「热门」「推荐」等 tab。
• 策略构建中心：零代码可视化建模，股票与期货两条线路（strategyBuild/stock|*、strategyBuild/crypto/*），支持代码校验、指标计算、回测结果查看。
• 投稿与激励：投稿策略赚取收益、创作者激励、官方认证创作者体系。

5.6 数据中心（/data-center）

• 看板式布局：hero 主卡 + 模块卡（modules）、热力图（heat-grid）、宏观（macro）、板块轮动（rotation）、ETF、财富（wealth）、信号（signal）、时间线（timeline）、个股列表（stock-row）等区块。
• 采用 section--* 卡片分节 + section-head 标题栏 + 迷你走势 sparkline，信息密度高。
• 含数据集（dataset）和模块（module）两类详情页，由 DataCenterFrame 统一外壳承载。

5.7 会员与支付

• 会员分基础版、进阶版（Pro）、专业版（Pre）以及 VIP；权益矩阵通过 membership.capability.* 文案描述（如 AI 全自动实盘、算力赠送、私享策略库、逐步回放、智能警报等）。
• 会员徽章 membership-badge 有多套渐变色（金、紫蓝、橙、灰等），随等级变化。
• 支付支持支付宝 / 微信扫码，以及加密货币支付（/payment/crypto）；充值满额赠送 VIP 代金券。

5.8 账户中心与管理后台

• 账户中心：总览、账户信息、收藏与发布、关注、实盘、账单、工单、交易所接入、安全与偏好设置。
• 管理后台（Admin Console）：用户与 VIP 管理、策略广场与模板管理、回测/实盘/算力/缓存/服务/错误监控、订单退款、K 线数据、图表警报、数据同步、流量调度等，以数据表格与监控面板为主。

5.9 移动端（/mobile）

• 独立路由 mobileHome，与桌面端共享设计令牌，但导航收敛为底部 tab / 抽屉形式。
• 头部在 ≤960px 切换汉堡菜单；功能卡转为纵向堆叠并隐藏描述文字。

6. 组件与交互规范

7. 响应式与主题

• 断点：约 960px 与 640px 两级；头部内边距 26 → 18 → 12px；Mega 侧栏由多列转 2 列；功能卡纵向堆叠。
• 动效：下拉/导航 0.18–0.22s，主题切换 0.24s，Hero 入场 hero-enter--delay-1/2 分级淡入，CTA hover 上移 2px。
• 无障碍：skip-link（跳到主要内容）、aria-label、aria-expanded、focus-visible 焦点态。

8. 实战速查手册

8.1 Design Token 速查

8.2 路由 / 层级 / 断点速查

8.3 逆向复刻操作手册

1. 取外壳：curl -s https://lhk.ai，读取内联主题脚本与资源清单。
2. 取令牌：抓取 /assets/css/index.*.css，用 grep 提取 :root{...} 与 --* 变量，即为完整 Design Token。
3. 取路由：抓取 /assets/js/index.*.js，搜索 path:"/" 与 name:"..."，还原路由表与 meta 标题。
4. 取文案：搜索 "xxx.key":"中文" 键值对，得到全部 i18n 文案。
5. 取落地页：定位 LandingHome.*.js/.css，得到营销层独立令牌与 Hero 规格。

# 一键提取主题令牌
curl -s https://lhk.ai/assets/css/index.JcVxZNbQ.css \
  | grep -oE '\-\-[a-z0-9-]+: [^;}]+' | sort -u

# 提取路由
curl -s https://lhk.ai/assets/js/index.DVIthQbW.js \
  | grep -oE 'path:"[^"]+",name:"[^"]+"' | sort -u